class GoodsData extends HTMLElement {

	//服务返回数据
	back_data;
	div_component;
	div_waiting;
	backGet() {

		return this.back_data;
	}
	backSet(data) {
		alert("ok")
		this.back_data = data;
	}

	get id()
	{
		alert("get")
		return this.getAttribute('id');
	}
	set id(val)
	{
		alert("set")
		if (val)
		{
			this.setAttribute('id', val);
		}
	}

	get serviceUrl()
	{
		return this.getAttribute('serviceUrl');
	}
	set serviceUrl(val)
	{
		if (val)
		{
			this.setAttribute('serviceUrl', val);
		}
	}
	
	get width()
    {
        if (this.getAttribute('width') == null)
            return '400px';
        else
            return this.getAttribute('width');
    }
    set width(val)
    {
        if (val)
        {
            this.setAttribute('width', val);
        }
    }
    get height()
    {
        if (this.getAttribute('height') == null)
            return '300px';
        else
            return this.getAttribute('height');
    }
    set height(val)
    {
        if (val)
        {
            this.setAttribute('height', val);
        }
	}
	

	//监听标签属性的变化
	static get observedAttributes()
	{
		//先执行静态方法
		//console.log('Custom web-dwcomfield element observedAttributes.');
		return ['id','name','computeexp','area','colposition','align'];
	}

	//构造函数
	constructor() {
		super();
		this.init();
	}
	

	init(){
		alert("ok");
		// 创建一个shadow root
		let shadow = this.attachShadow( { mode: 'closed' } );
		// 创建样式
		const style = document.createElement('style');
		// 为shadow Dom添加样式
		style.textContent = `
		.table {
			border-collapse: collapse;
			border-spacing: 0;
			padding: 0;
		}
		`
		shadow.appendChild(style);
		//设置表格数据
		//this.getData(shadow);
		this.drawWaiting(shadow);
		//this.getDataByWebSocket(shadow);

		//set get 测试
		//this.backSet("123");
		//alert(this.backGet());

		//alert(this.id);
		//this.setAttribute('id', "fff");
		//alert("11");
		//this.id= "ffff";
		//alert(this.id);
	}



	/**
	 获取数据 2020-09-08
	 */
	getData(shadow)
	{
		let xmlhttp=new XMLHttpRequest();
		//设置xhr请求的超时时间
		xmlhttp.timeout = 3000;
		//创建一个请求，采用异步
		xmlhttp.open("GET",this.serviceUrl,true);
		//设置响应返回的数据格式
		xmlhttp.setRequestHeader('timestamp',new Date().getTime());
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				let result=JSON.parse(xmlhttp.responseText);
				let tr;
				let table;
				let i;
				if (result.rows > 0)
				{
					let cachedData=result.data;
					//创建一个table
					table=document.createElement("table");
					//指定table样式
					table.setAttribute('class', 'table');
					//设置table属性
					table.border=1;
					//设置表头
					tr=document.createElement("tr");
					let goods=cachedData[0];
					for (var key in goods)
					{
						var td=document.createElement("td");
						td.innerText=key;
						tr.appendChild(td);
					}
					table.appendChild(tr);
					//设置表头结束
					//填充数据
					for(i=0;i <result.rows;i++){
						tr=document.createElement("tr");
						let goods=cachedData[i];
						for (var key in goods)
						{
							var td=document.createElement("td");
							td.innerText=goods[key];
							tr.appendChild(td);
						}

						table.appendChild(tr);
					}
					//填充数据结束
					//将table赋值给shadow
					shadow.appendChild(table);


				}
			}
		}
		xmlhttp.send();
	}

	/**
	 获取数据 2020-09-11 websocket 形式
	 */
	getDataByWebSocket(shadow)
	{
		// 打开一个 web socket
		var ws = new WebSocket("ws:"+this.serviceUrl);
		
		ws.onopen = function()
		{
			if (ws.readyState===1) {
				ws.send();
			}else{
				//do something
			}
		};
		
		ws.onmessage = function (evt) 
		{ 
			var received_msg = evt.data;
			let result=JSON.parse(received_msg);
			let tr;
			let table;
			let i;
			if (result.rows > 0)
			{
				let cachedData=result.data;
				//创建一个table
				table=document.createElement("table");
				//指定table样式
				table.setAttribute('class', 'table');
				//设置table属性
				table.border=1;
				//设置表头
				tr=document.createElement("tr");
				let goods=cachedData[0];
				for (var key in goods)
				{
					var td=document.createElement("td");
					td.innerText=key;
					tr.appendChild(td);
				}
				table.appendChild(tr);
				//设置表头结束
				//填充数据
				for(i=0;i <result.rows;i++){
					tr=document.createElement("tr");
					let goods=cachedData[i];
					for (var key in goods)
					{
						var td=document.createElement("td");
						td.innerText=goods[key];
						tr.appendChild(td);
					}
					table.appendChild(tr);
				}
				//填充数据结束
				//将table赋值给shadow
				shadow.appendChild(table);
			}
		};
		
		ws.onclose = function(e)
		{ 
			alert(e.code+e.reason+e.wasClean);
			// 关闭 websocket
			alert("连接已关闭..."); 
		};
         
	}


	connectedCallback()
	{
		console.log('Custom web-dwcol element added to page.');
	}
	disconnectedCallback()
	{
		console.log('Custom web-dwcol element removed from page.');
	}
	adoptedCallback()
	{
		console.log('Custom web-dwcol element moved to new page.');
	}
	attributeChangedCallback(name, oldValue, newValue)
	{
		//console.log('标签DWColumnInfo属性'+name+'发生变化由'+oldValue+'到'+newValue);
	}



	drawWaiting(shadow)
    {
        this.div_waiting=document.createElement('div');
        this.div_waiting.setAttribute('id','div_waiting');
        this.div_waiting.setAttribute('name','div_waiting');
        this.div_waiting.style.position='absolute';
        this.div_waiting.style.background='#EEEEEE';
        this.div_waiting.style.left='0px';
        this.div_waiting.style.top='0px';
        this.div_waiting.style.zIndex="10";
        this.div_waiting.style.width=this.width;
        this.div_waiting.style.height=this.height;

        let cubeWidth;
        if (this.getValueFromPXProperty(this.width)>=this.getValueFromPXProperty(this.height))
            cubeWidth=this.getValueFromPXProperty(this.height);
        else
            cubeWidth=this.getValueFromPXProperty(this.width);
        let imgCubeWidth;
        if (cubeWidth>128)
            imgCubeWidth=128;
        else
            imgCubeWidth=cubeWidth;
        let imgTop;
        let imgLeft;
        imgTop=Math.trunc((this.getValueFromPXProperty(this.height) - imgCubeWidth)/2);
        imgLeft=Math.trunc((this.getValueFromPXProperty(this.width) - imgCubeWidth)/2);
        let l_img=document.createElement('img');
        this.div_waiting.appendChild(l_img);
        l_img.setAttribute('src','img/timg.gif');
        l_img.style.position="absolute";
        l_img.style.width=imgCubeWidth+'px';
        l_img.style.height=imgCubeWidth+'px';
        l_img.style.top=imgTop+'px';
        l_img.style.left=imgLeft+'px';

        this.p_waitingMsg=document.createElement('p');
        this.p_waitingMsg.style.position="absolute";
        this.p_waitingMsg.style.width=this.width;
        this.p_waitingMsg.style.height='30px';
        this.p_waitingMsg.style.top=(imgTop+imgCubeWidth)+'px';
        this.p_waitingMsg.style.left='0px';
        this.p_waitingMsg.style.border='0px';
        this.p_waitingMsg.setAttribute('align','center');
        this.p_waitingMsg.innerHTML='请等待......';
        this.div_waiting.appendChild(this.p_waitingMsg);
		//this.div_waiting.style.display='none';
		
		//将table赋值给shadow
		shadow.appendChild(this.div_waiting);
	}
	
	getValueFromPXProperty(pxpro)
    {
		alert(pxpro);
        let str_value=pxpro.substr(0,(pxpro.length - 2));
        return parseInt(str_value);
    }


}
//注册顺序很关键 一定要先注册web-dwcol
window.customElements.define('goods-data', GoodsData);